import React, { FC, useEffect, useState } from 'react';
import styles from './index.less';
import { connect, IndexModelState, ConnectProps, history } from 'umi';

interface PageProps extends ConnectProps {
  index: IndexModelState;
  dispatch: any;
}

const Index: FC<PageProps> = (props: any) => {
  const { children } = props;
  const { navILst } = props.index;
  let { pathname } = props.location;

  let initState = 0;
  switch (pathname) {
    case '/music':
      initState = 0;
      break;
    case '/music/rank':
      initState = 1;
      break;
    case '/music/songList':
      initState = 2;
      break;
    case '/music/dj':
      initState = 3;
      break;
    case '/music/artist':
      initState = 4;
      break;
    default:
      initState = 0;
      break;
  }

  const selectNav = (data: any, index: number) => {
    setIndex(index);
    history.push(data.path);
  };

  const [selectIndex, setIndex] = useState(initState);

  return (
    <div>
      <div className={styles.content}>
        <ul className={styles.subnav}>
          {navILst.map((navItem: any, index: number) => (
            <li
              className={selectIndex == index ? styles.active : styles.item}
              key={index}
              onClick={() => {
                selectNav(navItem, index);
              }}
            >
              <span>{navItem.title}</span>
            </li>
          ))}
        </ul>
      </div>
      <section>{children}</section>
    </div>
  );
};

export default connect(({ index }: { index: IndexModelState }) => ({ index }))(
  Index,
);
